<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>BTVD</title>
		<link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css" />
		<link href="../css/index.css" rel="stylesheet">
		<link href="../css/app.css" rel="stylesheet">
		<!-- 引入样式 -->
	</head>
	<body>
		<div id="app" class="qx_main">
			<!--必须外面包一层div，并渲染这个div里的内容才会显示。-->
			<el-container class="qx_btvd_container">
				<el-header>
					<div class="qx_logo"><img src="../images/logo.png"></div>
					<div class="qx_right">
						<el-dropdown>
							<span class="el-dropdown-link">
								<i class="fa fa-user"></i> admin
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item><el-button class="qx_topbtn" @click="dialogVisible = true">修改密码</el-button></el-dropdown-item>								
							</el-dropdown-menu>
						</el-dropdown>
						<el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%" center>
							<el-form :model="changepasswordForm" :rules="rules" ref="changepasswordForm" label-width="100px" size="small" class="plr30">
								<el-form-item label="用户名" prop="username">
								    <el-input v-model="changepasswordForm.username"  placeholder="用户名"></el-input>
								</el-form-item>
								<el-form-item label="原密码" prop="originalPassword">
								    <el-input v-model="changepasswordForm.originalPassword"  placeholder="原密码"></el-input>
								</el-form-item>
								<el-form-item label="新密码" prop="newlPassword">
								    <el-input v-model="changepasswordForm.newlPassword"  placeholder="新密码"></el-input>
								</el-form-item>
								<el-form-item label="确认新密码" prop="newlPasswordConfirm">
								    <el-input v-model="changepasswordForm.newlPasswordConfirm"  placeholder="确认新密码"></el-input>
								</el-form-item>
							</el-form>
							<span slot="footer" class="dialog-footer">
								<el-button @click="dialogVisible = false">取 消</el-button>
								<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
							</span>
						</el-dialog>
					</div>
				</el-header>
				<el-container class="pr">
					<el-radio-group v-model="isCollapse" @change="toggleName" class="pabottom">
						<el-radio-button v-if="display" :label="false">{{open}}</el-radio-button>
						<el-radio-button v-else :label="true">{{close}}</el-radio-button>
					</el-radio-group>
					<div class="qx_bg_color">
						<!--el-scrollbar-->
						<el-scrollbar class="qx_overx_hidden">
							<!--element ui滚动条-->
							<el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"
							 background-color="#27304f" text-color="#fff" active-text-color="#009bb1">
								<!--菜单属性、可以添加样式：-->
								<el-menu-item index="1">
									<i class="fa fa-home"></i>
									<span slot="title">首页</span>
								</el-menu-item>
								<el-submenu index="2">
									<template slot="title">
										<i class="fa fa-video-camera"></i>
										<span>设备管理</span>
									</template>
									<el-menu-item-group>
										<el-menu-item index="2-1"><i class="fa fa-circle-thin qx_icontwo"></i> 设备管理</el-menu-item>
										<el-menu-item index="2-2"><i class="fa fa-circle-thin qx_icontwo"></i> 设备组管理</el-menu-item>
									</el-menu-item-group>
								</el-submenu>
								<el-submenu index="3">
									<template slot="title">
										<i class="fa fa-lightbulb-o"></i>
										<span slot="title">规则检测管理</span>
									</template>
									<el-menu-item-group>
										<el-menu-item index="3-1"><i class="fa fa-circle-thin qx_icontwo"></i> 检测规则管理</el-menu-item>
										<el-menu-item index="3-2"><i class="fa fa-circle-thin qx_icontwo"></i> 检测任务管理</el-menu-item>
									</el-menu-item-group>
								</el-submenu>
								<el-submenu index="4">
									<template slot="title">
										<i class="fa fa-bell"></i>
										<span slot="title">告警管理查询</span>
									</template>
									<el-menu-item-group>
										<el-menu-item index="4-1"><i class="fa fa-circle-thin qx_icontwo"></i> 告警管理查询</el-menu-item>
									</el-menu-item-group>
								</el-submenu>
								<el-menu-item index="5">
									<i class="fa fa-map"></i>
									<span slot="title">地图总览</span>
								</el-menu-item>
								<el-menu-item index="6">
									<i class="fa fa-file-excel-o"></i>
									<span slot="title">报表管理</span>
								</el-menu-item>
								<el-submenu index="7">
									<template slot="title">
										<i class="fa fa-desktop"></i>
										<span>系统管理</span>
									</template>
									<el-menu-item-group>
										<el-menu-item index="7-1"><i class="fa fa-circle-thin qx_icontwo"></i> 用户管理</el-menu-item>
										<el-menu-item index="7-2"><i class="fa fa-circle-thin qx_icontwo"></i> 角色管理</el-menu-item>
										<el-menu-item index="7-3"><i class="fa fa-circle-thin qx_icontwo"></i> 组织机构管理</el-menu-item>
									</el-menu-item-group>
								</el-submenu>
							</el-menu>
						</el-scrollbar>
					</div>

					<el-main class="qx_main_outbox">
						<!--主体区域-->
					</el-main>
				</el-container>
			</el-container>
		</div>
	</body>
	<script src="../js/vue.min.js"></script>
	<script src="../js/vue-router.js"></script>
	<script src="../js/element.min.js"></script>
	<script>
		new Vue({
			el: '#app', //渲染id为app的div
			data: function() { //数据
				return {
					//竖行导航菜单
					isCollapse: true, //导航菜单初始时是状态
					visible: false,
					display: true,
					open: ">",
					close: "<",
					dialogVisible: false, //修改密码弹窗
					changepasswordForm:{
						username:'admin0001',
						originalPassword:'',
						newlPassword:'',
						newlPasswordConfirm:''
					},
					rules: {
						username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						}],
						originalPassword: [{
							required: true,
							message: '请输入原始面膜',
							trigger: 'blur'
						}],
						newlPassword: [{
							required: true,
							message: '请输入新密码',
							trigger: 'blur'
						}],
						newlPasswordConfirm:[{
							required: true,
							message: '请确认新密码',
							trigger: 'blur'
						}]
					}
				}
			},
			methods: { //方法
				handleOpen(key, keyPath) { //展开指定的 sub-menu
					console.log(key, keyPath);
				},
				handleClose(key, keyPath) { //收起指定的 sub-menu
					console.log(key, keyPath);
				},
				toggleName: function() { //点击切换展开，收缩按钮		
					if (this.display === true) {
						this.display = false;
					} else {
						this.display = true;
					}
				}
			}
		})
	</script>
</html>
